.el-button {
  &:focus {
    outline: 0;
  }
  &.el-button--default {
    @include btn-default();
  }
  &.el-button--primary {
    @include btn-primary();
    &:disabled,
    &.disabled {
      opacity: 0.65;
    }
    &.is-plain:not(:disabled):not(.disabled) {
      &:hover,
      &:focus {
        color: #fff;
        background-color: $primary;
      }
    }
    &.is-plain {
      color: $primary;
      background-color: $primary-light-9;
      border-color: $primary-light-6;
      &.is-disabled:hover,
      &.is-disabled:focus {
        color: $primary;
        background-color: $primary-light-9;
        border-color: $primary-light-6;
      }
    }
  }
  &.el-button--text {
    @include link-primary();
  }
}

.el-link.el-link--default:hover {
  color: $primary;
}
.el-link.el-link--primary {
  color: $primary;
}
.el-link.el-link--default:after,
.el-link.el-link--default.is-underline:hover:after,
.el-link.el-link--primary.is-underline:hover:after,
.el-link.el-link--primary:after {
  border-bottom-color: $primary;
}

.el-radio__input {
  .el-radio__inner {
    &:hover {
      border-color: $primary;
    }
  }
  &.is-checked {
    .el-radio__inner {
      border-color: $primary;
      background-color: $primary;
    }
    + .el-radio__label {
      color: $primary;
    }
  }
}

.el-radio.is-bordered {
  &.is-checked {
    border-color: $primary;
  }
  &.is-disabled {
    border-color: $primary-light-8;
  }
}

.el-radio-button__inner:hover {
  color: $primary;
}
.el-radio-button {
  .el-radio-button__orig-radio:not(:disabled) {
    .el-radio-button__inner:hover {
      color: $primary;
    }
    &:checked {
      + .el-radio-button__inner {
        &:hover {
          color: #fff;
        }
        border-color: $primary;
        background-color: $primary;
        box-shadow: -1px 0 0 0 $primary;
      }
    }
  }
  .el-radio-button__orig-radio:disabled:checked + .el-radio-button__inner {
    background-color: $primary-light-9;
  }
}

.el-checkbox__inner:hover {
  border-color: $primary;
}
.el-checkbox__input {
  &.is-checked .el-checkbox__inner,
  &.is-indeterminate .el-checkbox__inner {
    border-color: $primary;
    background-color: $primary;
  }
  &.is-checked + .el-checkbox__label {
    color: $primary;
  }
  &.is-focus .el-checkbox__inner {
    border-color: $primary;
  }
  &.is-disabled .el-checkbox__inner {
    background-color: $primary-transparent-1;
    border-color: $primary-transparent-2;
  }
}
.el-checkbox-button__inner:hover {
  color: $primary;
}
.el-checkbox-button {
  &.is-checked {
    .el-checkbox-button__inner {
      border-color: $primary;
      background-color: $primary;
      box-shadow: -1px 0 0 0 $primary-light-6;
    }
    &:first-child .el-checkbox-button__inner {
      border-left-color: $primary;
    }
  }
  &.is-focus .el-checkbox-button__inner {
    border-color: $primary;
  }
  &.is-disabled {
    &:first-child .el-checkbox-button__inner {
      border-left-color: $primary-transparent-2;
    }
    .el-checkbox-button__inner {
      background-color: $primary-transparent-1;
      border-color: $primary-transparent-2;
    }
  }
}
.el-checkbox.is-bordered {
  &.is-checked {
    border-color: $primary;
  }
  &.is-disabled {
    border-color: $primary-light-8;
  }
}

.el-input.is-active .el-input__inner,
.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: $primary;
  box-shadow: $box-shadow-base;
}

.el-input-number__decrease:hover,
.el-input-number__increase:hover {
  color: $primary;
}
.el-input-number__decrease:hover:not(.is-disabled)
  ~ .el-input
  .el-input__inner:not(.is-disabled),
.el-input-number__increase:hover:not(.is-disabled)
  ~ .el-input
  .el-input__inner:not(.is-disabled) {
  border-color: $primary;
}

.el-select .el-input {
  &.is-focus .el-input__inner,
  .el-input__inner:focus {
    border-color: $primary;
  }
}

.el-select-dropdown__item.selected {
  color: $primary;
}

.el-cascader .el-input {
  .el-input__inner:focus,
  &.is-focus .el-input__inner {
    border-color: $primary;
  }
}

.el-cascader-node.in-active-path,
.el-cascader-node.is-active,
.el-cascader-node.is-selectable.in-checked-path {
  color: $primary;
}

.el-switch.is-checked .el-switch__core {
  background-color: $primary;
  border-color: $primary;
}

.el-switch__label.is-active {
  color: $primary;
}

.el-slider__bar {
  background-color: $primary;
}
.el-slider__button {
  border-color: $primary;
}

.time-select-item.selected:not(.disabled),
.el-time-panel__btn.confirm {
  color: $primary;
}
.el-range-editor.is-active,
.el-range-editor.is-active:hover {
  border-color: $primary;
}

.el-date-table td.current:not(.disabled) span,
.el-month-table td.end-date .cell,
.el-month-table td.start-date .cell,
.el-date-table td.selected span,
.el-date-table td.end-date span,
.el-date-table td.start-date span {
  background-color: $primary;
}
.el-date-table td.today span,
.el-picker-panel__icon-btn:hover,
.el-picker-panel__shortcut:hover,
.el-month-table td.current:not(.disabled) .cell,
.el-month-table td.today .cell,
.el-month-table td .cell:hover,
.el-year-table td.today .cell,
.el-year-table td .cell:hover,
.el-year-table td.current:not(.disabled) .cell,
.el-date-table td.available:hover {
  color: $primary;
}
.el-month-table td.end-date .cell,
.el-month-table td.start-date .cell {
  color: #fff;
}

.el-upload-list__item.is-success .el-upload-list__item-name:focus,
.el-upload-list__item.is-success .el-upload-list__item-name:hover {
  color: $primary;
}
.el-upload.el-upload--picture-card {
  background-color: $primary-light-9;
  border-color: $primary-light-8;
}
.el-upload--picture-card:hover,
.el-upload:focus {
  color: $primary;
  border-color: $primary;
}
.el-upload-dragger .el-upload__text em {
  color: $primary;
}
.el-upload-dragger:hover {
  border-color: $primary;
}

.el-transfer-panel__item:hover {
  color: $primary;
}

.el-tag {
  color: $primary;
  background-color: $primary-light-9;
  border-color: $primary-light-8;
  .el-tag__close {
    color: $primary;
    &:hover {
      background-color: $primary;
    }
  }
}
.el-tag--plain {
  color: $primary;
  background-color: #fff;
  border-color: $primary-light-8;
}
.el-tag--dark {
  color: #fff;
  background-color: $primary;
  border-color: $primary;
  &.is-hit {
    border-color: $primary;
  }
  .el-tag__close {
    color: #fff;
    &:hover {
      background-color: $primary-light-6;
    }
  }
}

.el-progress-bar__inner {
  background-color: $primary;
}

.el-pagination.is-background .el-pager li:not(.disabled) {
  &.active {
    background-color: $primary;
    &:hover {
      color: #fff;
    }
  }
  &:hover {
    color: $primary;
  }
}
.el-pager li {
  &.active,
  &:hover {
    color: $primary;
  }
}

.el-loading-spinner {
  .path {
    stroke: $primary;
  }
  .el-loading-text {
    color: $primary;
  }
}

.el-tabs__item {
  &.is-active,
  &:hover {
    color: $primary;
  }
}
.el-tabs__active-bar {
  background-color: $primary;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  &:not(.is-disabled):hover,
  &.is-active {
    color: $primary;
  }
}

.el-breadcrumb__inner a:hover,
.el-breadcrumb__inner.is-link:hover {
  color: $primary;
}

.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  color: $primary;
  background-color: $primary-light-9;
}

.el-step__head.is-finish {
  color: $primary;
  border-color: $primary;
}
.el-step__title.is-finish,
.el-step__description.is-finish {
  color: $primary;
}
.el-timeline-item__node--primary {
  background-color: $primary;
}

.el-calendar-table {
  td {
    &.is-today {
      color: $primary;
    }
    &.is-selected {
      background-color: $primary-light-9;
    }
  }
  .el-calendar-day:hover {
    background-color: $primary-light-9;
  }
}

.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: $border-color;
}

.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: $border-color;
}

.el-menu-sidebar {
  .el-menu-item {
    &.is-active {
      color: $primary;
    }
    &:hover {
      background-color: $primary-light-9;
    }
  }

  .el-submenu {
    .el-submenu__title:hover {
      background-color: $primary-light-9;
    }
  }
}

.el-dialog__headerbtn {
  &:focus,
  &:hover {
    .el-dialog__close {
      color: $primary;
    }
  }
}
